<?php
    echo link_tag('css/skin.css','stylesheet','text/css');
    echo link_tag('css/lecture.css','stylesheet','text/css');
?>
<script src="<?php echo base_url();?>/js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="<?php echo base_url();?>/js/jquery.jcarousel.js" type="text/javascript"></script>
<script type="text/javascript">
    function mycarousel_initCallback(carousel)
    {
        // Disable autoscrolling if the user clicks the prev or next button.
        carousel.buttonNext.bind('click', function() {
            carousel.startAuto(0);
        });

        carousel.buttonPrev.bind('click', function() {
            carousel.startAuto(0);
        });

        // Pause autoscrolling if the user moves with the cursor over the clip.
        carousel.clip.hover(function() {
            carousel.stopAuto();
        }, function() {
            carousel.startAuto();
        });
    };

    jQuery(document).ready(function() {
        jQuery('#mycarousel').jcarousel({
            auto: 2,
            wrap: 'last',
            initCallback: mycarousel_initCallback
        });
    });

</script>

<ul id="mycarousel" class="jcarousel-skin-tango">
    <?php 
        foreach ($query_jskull as $row):
            $image_properties = array(
            'src' => 'images/'.$row->IMG,
            'alt' => $row->NAME,
            'class' => 'post_images',
            'width' => '232',
            'height' => '79',
            'title' => $row->NAME,
            'rel' => 'lightbox',
            );
        
            echo '<li>';
            echo "<a href='$row->LINK'>".img($image_properties)."</a>"; 
            echo '</li>';
        endforeach; 
    ?>
</ul>